<html>
    <head>
        <title>状态管理</title>
    </head>
    <body>
        <script>
            // 状态管理
                    // 一、类 Flux 状态管理的官方实现
                            /*
                                由于炸uu哪个台零散地分布在许多组件和组件之间的交互中，大象应用复杂度也经常逐渐增长。
                                为了解决这个问题，Vue提供了 vuex: 我们有收到Elm启发的状态管理库。
                                vuex甚至集成到 vue-devtools(Vue开发工具) 中，无需配置即可进行 "时光旅行调试(time travel debugging)"
                            */


                            // 1. React 的开发者请参考以下信息
                                    /*
                                        如果你是来自React的开发者，你可能会对Vuex 和 Redux间的差异表示关注，Redux 是React生态环境中最流行的Flux实现。
                                        Redux 事实上无法感知视图层，所以它能够轻松的通过一些 "简单绑定" 和 Vue一起工作。
                                        Vuex 区别于它是一个专门为Vue应用锁设计。这使得它能够更好地和Vue进行整合，同时提供简洁的API和改善过的开发体验。
                                    */



                    // 二、简单状态管理起步
                            /*
                                经常被忽略的是，Vue应用中原始 data 对象的实际来源-----当访问数据对象时，一个Vue实例只是"简单的代理访问".

                                所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现：
                            */
                                    var sourceOfTruth={}

                                    var vmA = new Vue ({
                                        data:sourceOfTruth
                                    })

                                    var vmB = new Vue({
                                        data:sourceOfTruth
                                    })
                            /*
                                现在当sourceOfTruth 发生变更，vmA 和 vmB 都将自动地更新它们的视图。子组件们的每个实例也会通过 this.$root.$data 去访问。
                                现在我们有了唯一的数据来源，但是，调试将会变为噩梦。
                                任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。
                            */
                            
                            // 为了解决这个问题，我们采用一个简单的 store 模式：
                                    var store ={
                                        debug:true,
                                        state:{
                                            message:'Hello!'
                                        },
                                        setMessageAction(newValue){
                                            if(this.debug) console.log('setMessageAction triggered with',newValue)
                                            this.state.message = newValue
                                        },
                                        clearMessageAction(){
                                            if(this.dubug) console.log('clearMessageAction triggered')
                                            this.state.message =''
                                        }
                                    }

                            /*
                                需要注意，所有store中 state 的变更，都放置在store自身的action中去管理。
                                这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及他们是如何被触发。
                                当错误出现时，我们现在也会有一个 log 记录之前发生了什么。
                            */ 
                            //  此外，每个实例/组件仍然可以拥有和管理自己的私有状态：
                                    var vmA = new Vue({
                                        data:{
                                            privateState:{},
                                            shareedState:store.state
                                        }
                                    });

                                    var vmB = new Vue({
                                        data:{
                                            privateState:{},
                                            shareedState:store.state
                                        }
                                    });

                            // 重要的是，注意你不应该在 action中替换原始的状态对象---组件 和 store 需要引用 "同一个共享对象"，变更才能被观察到。

                            /*
                                接着我们继续延伸约定，组件不允许直接变更属于store实例的state,而应该执行 action 来分发(dispatch)事件，通知 store 去改变。
                                我们最终达成了Flux架构。
                                这样约定的好处是，我们能够记录所有store中发生的state变更，同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。
                            */
                            
        </script>
    </body>
</html>